<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item disabled title="全部" />
      <van-dropdown-item
        title="价格"
        v-model="priceVal"
        :options="option2"
        @change="changePrice"
      />
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        @change="changeCategory"
      />
    </van-dropdown-menu>
    <van-empty
      v-if="SearchGoodsList.length === 0"
      image="search"
      description="暂时没有该商品！"
    />
    <Products v-else :SearchGoodsList="SearchGoodsList"></Products>
  </div>
</template>

<script>
import Products from "./Products.vue"

export default {
  components: {
    Products,
  },
  props: {
    filterCategory: {
      type: Array,
    },
    SearchGoodsList: {
      type: Array,
    },
  },
  data() {
    return {
      priceVal: "",
      categoryVal: -1,
      option2: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
    }
  },
  methods: {
    // 按不同分类搜索
    changeCategory(val) {
      // 调用父组件的方法
      // console.log(val)val就是分类id
      this.$emit("changeCategory", val)
    },
    // 按不同价格搜索
    changePrice(val) {
      console.log(val)
      this.$emit("changePrice", val)
    },
  },
  beforeUpdate() {
    // 数据挂载完毕，遍历filterCategory数组，看看哪一项的checked为true
    // checked为true则其为默认选中的项   这一项就被选上了
    /* 异步显示的数据先显示vue中的初始数据，再显示请求的数据，
    一开始this.filterCategory在vue中不存在，所以无法遍历 
    方法：避免在没有对象的时候显示解析（有数据才解析），用if判断控制一下，确保有数据的时候在解析就OK了*/
    if (this.filterCategory) {
      this.categoryVal = this.filterCategory.filter(
        (item) => item.checked
      )[0].value
    }
  },
}
</script>

<style lang="scss" scoped></style>
